<template>
  <div class="pet-column-page">
    <!-- 背景图片 -->
    <div class="page_bg" :style="`background: url(${require('@/assets/images/indb.jpg')}) center top no-repeat;`"></div>
    
    <!-- 主要内容 -->
    <div class="container">
      <div class="row">
        <!-- 右侧主内容区域 -->
        <div class="col-xs-12 col-sm-8 col-md-9" style="float:right">
          <div class="list_box">
            <h2 class="left_h2">宠物栏目</h2>
            <ul class="list_news">
              <li v-for="article in paginatedArticles" :key="article.id">
                <router-link 
                  :to="`/pet-column/article/${article.id}`" 
                  :title="article.title"
                >
                  {{ article.title }}
                </router-link>
                <span class="news_time">{{ formatDate(article.date) }}</span>
              </li>
            </ul>
            
            <!-- 分页 -->
            <div class="pagebar" v-if="totalPages > 1">
              <div class="pagination">
                <a 
                  class="page-item page-link st" 
                  @click="goToPage(currentPage - 1)"
                  :class="{ disabled: currentPage === 1 }"
                  href="javascript:;" 
                  title="上一页"
                >
                  &lt;&lt;
                </a>
                <a 
                  v-for="page in visiblePages" 
                  :key="page"
                  @click="goToPage(page)"
                  :class="['page-num', { 'page-num-current': page === currentPage }]"
                  href="javascript:;"
                >
                  {{ page }}
                </a>
                <a class="page-item page-link" href="javascript:;" :title="`当前页/总页数`">
                  {{ currentPage }}/{{ totalPages }}
                </a>
                <a 
                  class="page-item page-link st" 
                  @click="goToPage(currentPage + 1)"
                  :class="{ disabled: currentPage === totalPages }"
                  href="javascript:;" 
                  title="下一页"
                >
                  &gt;&gt;
                </a>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 左侧边栏 -->
        <div class="col-xs-12 col-sm-4 col-md-3">
          <!-- 导航菜单 -->
          <div class="left_nav" id="categories">
            <h2 class="left_h2">宠物栏目</h2>
            <ul class="left_nav_ul" id="firstpane">
              <li>
                <router-link 
                  class="biglink" 
                  :class="{ curr: $route.path.includes('/knowledge') }"
                  to="/pet-column/knowledge"
                >
                  养宠知识
                </router-link>
              </li>
              <li>
                <router-link 
                  class="biglink" 
                  :class="{ curr: $route.path.includes('/news') }"
                  to="/pet-column/news"
                >
                  宠物新闻
                </router-link>
              </li>
            </ul>
          </div>
          
          <!-- 搜索框 -->
          <form @submit.prevent="performSearch">
            <div class="input-group search_group">
              <input 
                type="text" 
                v-model="searchKeyword"
                class="form-control input-sm" 
                placeholder="信息查询"
              >
              <span class="input-group-btn">
                <button @click="performSearch" class="btn btn-sm mysearch_btn" type="button">
                  搜 索
                </button>
              </span>
            </div>
          </form>
          
          <!-- 养宠知识 -->
          <div class="left_news">
            <h2 class="left_h2">养宠知识</h2>
            <ul>
              <li v-for="knowledge in knowledgeArticles.slice(0, 5)" :key="knowledge.id">
                <router-link :to="`/pet-column/article/${knowledge.id}`" :title="knowledge.title">
                  {{ knowledge.title }}
                </router-link>
                <span class="news_time">{{ formatDate(knowledge.date, true) }}</span>
              </li>
            </ul>
          </div>
          
          <!-- 联系我们 -->
          <div class="left_contact">
            <h2 class="left_h2" style="margin-bottom:20px;">联系我们</h2>
            <p>联系人：贫僧</p>
            <p>手机：暂无</p>
            <p>电话：暂无</p>
            <p>邮箱：暂无</p>
            <p>地址：暂无</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PetColumn',
  data() {
    return {
      searchKeyword: '',
      currentPage: 1,
      pageSize: 10,
      filteredArticles: [],
      allArticles: [
        // 宠物新闻
        {
          id: 1,
          title: '抵制大规模捕杀流浪狗',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 59572,
          content: '一场针对无辜流浪狗的猎杀正在进行！在全国各地，很多人加入了这场针对流浪狗的屠杀！这其中有很多人只是为了宣泄自己的情绪。这是由一根缺失的牵引绳引发的悲剧，是由一个不文明养犬人引发的惨案。因为一个人，一只狗，就会有无数只无辜的生命为之买单！文明社会，不应该发生这样的悲剧！'
        },
        {
          id: 2,
          title: '虐待动物行为入法有望',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 42356,
          content: '近日，关于虐待动物行为入法的讨论再次引起社会关注。专家表示，将虐待动物行为纳入法律范围，对于保护动物权益具有重要意义。'
        },
        {
          id: 3,
          title: '中国狂犬病防治项目再起航',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 38921,
          content: '中国狂犬病防治项目正式启动新一轮防治工作，旨在通过科学的方法降低狂犬病的发生率，保障人民群众的生命安全。'
        },
        {
          id: 4,
          title: '中国小动物保护协会新团队成立',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 35467,
          content: '中国小动物保护协会宣布成立新的专业团队，将致力于流浪动物救助、宠物保护等相关工作，为小动物的福利保障提供更专业的服务。'
        },
        {
          id: 5,
          title: '国家农业部官宣：猫犬属于非食用动物',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 56789,
          content: '国家农业部正式发布公告，明确规定猫、犬等伴侣动物属于非食用动物，此举对于保护动物权益具有里程碑意义。'
        },
        {
          id: 6,
          title: '流浪动物之家成立了',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 29834,
          content: '流浪动物之家正式成立，这是一个专门为流浪动物提供救助、医疗、领养服务的综合性平台。'
        },
        // 养宠知识
        {
          id: 7,
          title: '猫为什么会炸毛',
          date: '2025-09-13',
          category: 'knowledge',
          author: '宠物专家',
          views: 45623,
          content: '猫咪炸毛是一种自然的生理反应，通常出现在感到威胁、兴奋或恐惧的时候。了解猫咪炸毛的原因有助于更好地理解和照顾我们的猫咪朋友。'
        },
        {
          id: 8,
          title: '如何正确训练小狗大小便',
          date: '2025-09-13',
          category: 'knowledge',
          author: '训犬师',
          views: 67890,
          content: '训练小狗正确的大小便习惯是养狗的基础课程。通过正确的方法和耐心的训练，可以让小狗养成良好的卫生习惯。'
        },
        {
          id: 9,
          title: '宠物疫苗接种完整指南',
          date: '2025-09-13',
          category: 'knowledge',
          author: '兽医师',
          views: 53421,
          content: '宠物疫苗接种是保护宠物健康的重要措施。本文将详细介绍各种疫苗的接种时间、注意事项等重要信息。'
        },
        {
          id: 10,
          title: '如何选择适合的宠物食品',
          date: '2025-09-13',
          category: 'knowledge',
          author: '宠物营养师',
          views: 41267,
          content: '选择合适的宠物食品对宠物的健康至关重要。本文将从营养成分、年龄阶段、健康状况等方面详细说明如何选择。'
        },
        {
          id: 11,
          title: '宠物洗澡的正确方法',
          date: '2025-09-13',
          category: 'knowledge',
          author: '宠物美容师',
          views: 38964,
          content: '给宠物洗澡看似简单，但其中有很多需要注意的细节。正确的洗澡方法不仅能保持宠物清洁，还能增进与宠物的感情。'
        },
        {
          id: 12,
          title: '如何识别宠物常见疾病症状',
          date: '2025-09-13',
          category: 'knowledge',
          author: '兽医师',
          views: 49856,
          content: '早期发现宠物疾病症状对治疗至关重要。本文将介绍一些常见的疾病症状，帮助主人及时发现问题。'
        },
        {
          id: 13,
          title: '新手养猫完全指南',
          date: '2025-09-13',
          category: 'knowledge',
          author: '猫咪专家',
          views: 72345,
          content: '第一次养猫需要了解很多知识，从选择猫咪、准备用品到日常护理，本指南将为新手提供全面的帮助。'
        },
        {
          id: 14,
          title: '狗狗社交化训练的重要性',
          date: '2025-09-13',
          category: 'knowledge',
          author: '训犬师',
          views: 36789,
          content: '狗狗的社交化训练对其性格发展和行为表现有重要影响。适当的社交化训练能让狗狗更好地适应社会环境。'
        },
        {
          id: 15,
          title: '宠物老年期护理指南',
          date: '2025-09-13',
          category: 'knowledge',
          author: '兽医师',
          views: 44523,
          content: '随着宠物年龄增长，它们的护理需求也会发生变化。了解老年宠物的特殊需求，为它们提供更好的晚年生活。'
        }
      ]
    }
  },
  computed: {
    // 分页后的文章
    paginatedArticles() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.filteredArticles.slice(start, end)
    },
    // 总页数
    totalPages() {
      return Math.ceil(this.filteredArticles.length / this.pageSize)
    },
    // 可见的页码
    visiblePages() {
      const pages = []
      const maxVisiblePages = 5
      let start = Math.max(1, this.currentPage - Math.floor(maxVisiblePages / 2))
      let end = Math.min(this.totalPages, start + maxVisiblePages - 1)
      
      if (end - start < maxVisiblePages - 1) {
        start = Math.max(1, end - maxVisiblePages + 1)
      }
      
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      return pages
    },
    // 养宠知识文章
    knowledgeArticles() {
      return this.allArticles.filter(article => article.category === 'knowledge')
    }
  },
  mounted() {
    // 初始化时显示所有文章
    this.filteredArticles = [...this.allArticles]
  },
  methods: {
    // 跳转到指定页面
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page
        window.scrollTo({ top: 0, behavior: 'smooth' })
      }
    },
    // 执行搜索
    performSearch() {
      if (!this.searchKeyword.trim()) {
        this.filteredArticles = [...this.allArticles]
      } else {
        this.filteredArticles = this.allArticles.filter(article =>
          article.title.toLowerCase().includes(this.searchKeyword.toLowerCase()) ||
          article.content.toLowerCase().includes(this.searchKeyword.toLowerCase())
        )
      }
      this.currentPage = 1
    },
    // 格式化日期
    formatDate(dateString, short = false) {
      const date = new Date(dateString)
      if (short) {
        return `${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`
      }
      return date.toLocaleDateString('zh-CN')
    }
  }
}
</script>

<style scoped>
.pet-column-page {
  padding-top: 0; /* 使用全局body padding-top */
}

.page_bg {
  height: 200px;
  background-size: cover !important;
  background-position: center !important;
  margin-bottom: 30px;
}

.list_box {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.left_h2 {
  color: #04A07B;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #04A07B;
}

.list_news {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list_news li {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list_news li:last-child {
  border-bottom: none;
}

.list_news a {
  color: #333;
  text-decoration: none;
  flex: 1;
  margin-right: 15px;
  line-height: 1.5;
}

.list_news a:hover {
  color: #04A07B;
}

.news_time {
  color: #999;
  font-size: 14px;
  white-space: nowrap;
}

/* 侧边栏样式 */
.left_nav, .left_news, .left_contact {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.left_nav_ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left_nav_ul li {
  border-bottom: 1px solid #eee;
}

.left_nav_ul li:last-child {
  border-bottom: none;
}

.biglink {
  display: block;
  padding: 12px 0;
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

.biglink:hover {
  color: #04A07B;
}

.biglink.curr {
  color: #04A07B;
  font-weight: bold;
}

.search_group {
  margin-bottom: 20px;
}

.mysearch_btn {
  background: #04A07B;
  color: white;
  border: none;
}

.mysearch_btn:hover {
  background: #038066;
}

.left_news ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left_news li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left_news li:last-child {
  border-bottom: none;
}

.left_news a {
  color: #333;
  text-decoration: none;
  flex: 1;
  margin-right: 10px;
  font-size: 14px;
}

.left_news a:hover {
  color: #04A07B;
}

.left_contact p {
  margin-bottom: 8px;
  color: #666;
}

/* 分页样式 */
.pagebar {
  text-align: center;
  margin-top: 30px;
}

.pagination {
  display: inline-flex;
  gap: 5px;
}

.page-item, .page-num {
  display: inline-block;
  padding: 8px 12px;
  margin: 0 2px;
  background: white;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
}

.page-item:hover, .page-num:hover {
  background: #04A07B;
  color: white;
  border-color: #04A07B;
}

.page-num-current {
  background: #04A07B !important;
  color: white !important;
  border-color: #04A07B !important;
}

.page-item.disabled {
  background: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
  pointer-events: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .col-xs-12.col-sm-8.col-md-9 {
    float: none !important;
    order: 2;
  }
  
  .col-xs-12.col-sm-4.col-md-3 {
    order: 1;
    margin-bottom: 20px;
  }
  
  .pet-column-page {
    padding-top: 0; /* 使用全局body padding-top */
  }
}
</style>